<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的订单 - 二手市场</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/orders.css">
</head>
<body>
<header class="header">
  <div class="container">
    <div class="logo">
      <img src="images/logo.png" alt="二手市场">
      <h1>二手市场</h1>
    </div>
    <nav class="nav">
      <a href="index.html">首页</a>
      <a href="products.html">商品列表</a>
      <a href="cart.html">购物车</a>
      <a href="orders.html" class="active">我的订单</a>
      <div id="auth-link-container">
        <a href="login.html" id="auth-link">
          <span id="auth-text">登录/注册</span>
          <img id="user-avatar" src="" alt="用户头像" style="display: none;">
        </a>
      </div>
    </nav>
  </div>
</header>

<main class="container">
  <h2 class="page-title">我的订单</h2>

  <div class="order-filters">
    <button class="filter-btn active" data-status="">全部订单</button>
    <button class="filter-btn" data-status="1">待支付</button>
    <button class="filter-btn" data-status="2">待发货</button>
    <button class="filter-btn" data-status="3">待收货</button>
    <button class="filter-btn" data-status="5">已完成</button>
  </div>

  <div class="orders-list" id="orders-list">
    <!-- 订单列表将通过JS动态加载 -->
  </div>
</main>

<footer class="footer">
  <div class="container">
    <p>&copy; 2025 二手市场. 保留所有权利.</p>
  </div>
</footer>

<script src="js/api.js"></script>
<script src="js/utils.js"></script>
<script src="js/orders.js"></script>
</body>
</html>